<template>
	<view class="warp back">
		<view class="view-back">
			<view class="status-back-view">
				<fsw-steps :options="statuslist" :updown="down" :imgViewHeight="60" :lineViewHeight="4" active-color="#f39e00" :active="active" />
			</view>
			<view class="type-back-view">
				<view class="address-list-top">
					<uni-segmented-control
						:height="height"
						:current="current"
						:values="segmentedItems"
						:style-type="styleType"
						:active-color="activeColor"
						@clickItem="onClickItem"
					/>
				</view>
			</view>
			<view class="data-back-view">
				<block v-if="authType == 1">
					<view class="data-list-view">
						<view class="data-list-item-view">
							<image class="image" :src="inputData.inPersonIcon.username"></image>
							<input class="uni-input input" type="text" :placeholder="inputData.inPersonP.username" v-model="inputData.inPersonD.username" />
						</view>
					</view>
					<view class="data-list-view">
						<view class="data-list-item-view">
							<image class="image" :src="inputData.inPersonIcon.mobile"></image>
							<input class="uni-input input" type="text" :placeholder="inputData.inPersonP.mobile" v-model="inputData.inPersonD.mobile" />
						</view>
					</view>
					<view class="data-list-view">
						<view class="data-list-item-view">
							<image class="image" :src="inputData.inPersonIcon.idcard"></image>
							<input class="uni-input input" type="text" :placeholder="inputData.inPersonP.idcard" v-model="inputData.inPersonD.idcard" />
						</view>
					</view>
				</block>
				<block v-else>
					<view class="data-list-view">
						<view class="data-list-item-view">
							<image class="image" :src="inputData.inCompanyIcon.company"></image>
							<input class="uni-input input" type="text" :placeholder="inputData.inCompanyP.company" v-model="inputData.inCompanyD.company" />
						</view>
					</view>
					<view class="data-list-view">
						<view class="data-list-item-view">
							<image class="image" :src="inputData.inCompanyIcon.company"></image>
							<input class="uni-input input" type="text" :placeholder="inputData.inCompanyP.daima" v-model="inputData.inCompanyD.daima" />
						</view>
					</view>
					<view class="data-list-view">
						<view class="data-list-item-view">
							<image class="image" :src="inputData.inCompanyIcon.username"></image>
							<input class="uni-input input" type="text" :placeholder="inputData.inCompanyP.username" v-model="inputData.inCompanyD.username" />
						</view>
					</view>
					<view class="data-list-view">
						<view class="data-list-item-view">
							<image class="image" :src="inputData.inCompanyIcon.idcard"></image>
							<input class="uni-input input" type="text" :placeholder="inputData.inCompanyP.idcard" v-model="inputData.inCompanyD.idcard" />
						</view>
					</view>
					<view class="data-list-view">
						<view class="data-list-item-view">
							<image class="image" :src="inputData.inCompanyIcon.mobile"></image>
							<input class="uni-input input" type="text" :placeholder="inputData.inCompanyP.mobile" v-model="inputData.inCompanyD.mobile" />
						</view>
					</view>
					<view class="data-list-view">
						<view class="data-list-item-view">
							<image class="image" :src="inputData.inCompanyIcon.faren"></image>
							<input class="uni-input input" type="text" :placeholder="inputData.inCompanyP.faren" v-model="inputData.inCompanyD.faren" />
						</view>
					</view>
					<view class="data-list-view">
						<view class="data-list-item-view">
							<image class="image" :src="inputData.inCompanyIcon.phone"></image>
							<input class="uni-input input" type="text" :placeholder="inputData.inCompanyP.phone" v-model="inputData.inCompanyD.phone" />
						</view>
					</view>
					<view class="data-list-view">
						<view class="data-list-item-view">
							<image class="image" :src="inputData.inCompanyIcon.address"></image>
							<input class="uni-input input" type="text" :placeholder="inputData.inCompanyP.address" v-model="inputData.inCompanyD.address" />
						</view>
					</view>
				</block>
			</view>
			<view class="image-back-view" v-if="authType == 1">
				<view class="image-list-view">
					<view class="image-list-view-left" @click="imageClick(1)"><image class="image" :src="inputData.inPersonImg.idcardimg"></image></view>
					<view class="image-list-view-right" @click="imageClick(2)"><image class="image" :src="inputData.inPersonImg.idcardbackimg"></image></view>
				</view>
			</view>
			<view class="image-back-view" v-if="authType == 2">
				<view class="image-list-view">
					<view class="image-list-view-left" @click="imageClick(3)"><image class="image" :src="inputData.inCompanyImg.idcardimg"></image></view>
					<view class="image-list-view-right" @click="imageClick(4)"><image class="image" :src="inputData.inCompanyImg.idcardbackimg"></image></view>
				</view>
				<view class="image-list-view">
					<view class="image-list-view-left" @click="imageClick(5)"><image class="image" :src="inputData.inCompanyImg.licenseimg"></image></view>
					<view class="image-list-view-right"><image class="image"></image></view>
				</view>
			</view>
			<view class="btn-back-view">
				<view class="status"><text class="text">已审核</text></view>
				<view class="btn" @click="submitClick"><text class="text">提交</text></view>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageType: 0,
			height: 52,
			active: 1,
			statuslist: [
				{
					title: '提交信息',
					unselectIcon: '',
					selectIcon: '',
					width: 40,
					height: 40
				},
				{
					title: '评审审核',
					unselectIcon: '',
					selectIcon: '',
					width: 40,
					height: 40
				},
				{
					title: '完成',
					unselectIcon: '',
					selectIcon: '',
					width: 40,
					height: 40
				}
			],

			authType: '1', // 1 个人  2 企业
			segmentedItems: ['个人', '企业'],
			current: 0,
			activeColor: '#f39e00',
			styleType: 'button',
			inputData: {
				inPersonD: {
					username: '',
					mobile: '',
					idcard: '',
					idcardimg: '',
					idcardbackimg: ''
				},
				inPersonP: {
					username: '用户名',
					mobile: '手机号',
					idcard: '身份证号'
				},
				inPersonIcon: {
					username: '',
					mobile: '',
					idcard:  '',
				},
				inPersonImg: {
					idcardimg: '',
					idcardbackimg: ''
				},
				// inPersonIcon: {
				// 	username: '/static/auth/auth_a_user_name.png',
				// 	mobile: '/static/auth/auth_a_mobile.png',
				// 	idcard: '/static/auth/auth_a_idcard.png'
				// },
				// inPersonImg: {
				// 	idcardimg: '/static/auth/auth_idcard_just.png',
				// 	idcardbackimg: '/static/auth/auth_idcard_back.png'
				// },
				inCompanyD: {
					company: '',
					daima: '',
					username: '',
					idcard: '',
					mobile: '',
					faren: '',
					phone: '',
					address: '',
					idcardimg: '',
					idcardbackimg: '',
					licenseimg: ''
				},
				inCompanyP: {
					company: '公司名',
					daima: '统一社会信用代码',
					username: '法人姓名',
					idcard: '法人身份证号',
					mobile: '法人手机号',
					faren: '联系人',
					phone: '联系人手机号',
					address: '联系地址'
				},
				inCompanyIcon: {
					company: '',
					daima: '',
					username: '',
					idcard:'',
					mobile:'',
					faren:'',
					phone:'',
					address: '',
				},
				inCompanyImg: {
					idcardimg: '',
					idcardbackimg:'',
					licenseimg: '',
				},
				// inCompanyIcon: {
				// 	company: '/static/auth/auth_a_shop.png',
				// 	daima: '/static/auth/auth_a_so_code.png',
				// 	username: '/static/auth/auth_a_user_name.png',
				// 	idcard: '/static/auth/auth_a_idcard.png',
				// 	mobile: '/static/auth/auth_a_mobile.png',
				// 	faren: '/static/auth/auth_a_user_name.png',
				// 	phone: '/static/auth/auth_a_mobile.png',
				// 	address: '/static/auth/auth_a_contact_address.png'
				// },
				// inCompanyImg: {
				// 	idcardimg: '/static/auth/auth_idcard_photo.png',
				// 	idcardbackimg: '/static/auth/auth_ren_photo.png',
				// 	licenseimg: '/static/auth/auth_idcard_yyzz_back.png'
				// }
			},
			authInfo: {}
		};
	},
	onLoad() {
		this.getAuthInfoData();
	},
	methods: {
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
			}
			if (this.current == 1) {
				this.authType = '2';
			} else {
				this.authType = '1';
			}
		},
		imageClick(e) {
			this.selectImagePicker(e);

			//
		},

		selectImagePicker(e) {
			uni.chooseImage({
				sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				success: res => {
					this.$refs.loadingCover.show();
					var data = {};
					this.upload.sendRequest({
						api: this.api.common.uploadImageApi,
						data: data,
						imageData: res,
						success: res => {
							console.log(res);
							if (res.success == 'true' && res.data) {
								this.uploadImgData(e, res.data.url);
							}
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						},
						fail: res => {
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						}
					});
				}
			});
		},

		uploadImgData(type, imgurl) {
			switch (type) {
				case 1: {
					this.inputData.inPersonD.idcardimg = imgurl;
					break;
				}
				case 2: {
					this.inputData.inPersonD.idcardbackimg = imgurl;
					break;
				}
				case 3: {
					this.inputData.inCompanyD.idcardimg = imgurl;
					break;
				}
				case 4: {
					this.inputData.inCompanyD.idcardbackimg = imgurl;
					break;
				}
				case 5: {
					this.inputData.inCompanyD.licenseimg = imgurl;
					break;
				}
			}
		},

		submitClick() {
			if (this.pageType == 0) {
				this.addAuthData();
			} else {
				this.updateAuthData();
			}
		},

		getAuthInfoData() {
			var data = {};
			this.$refs.loadingCover.show();
			this.http.sendRequest({
				api: this.api.auth.sAuthApi,
				data: data,
				success: res => {
					console.log(res);
					if (res.success == 'true' && res.data) {
					}
					uni.showToast({
						title: res.message
					});
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},

		updateAuthData() {
			var data = {};
			this.$refs.loadingCover.show();
			this.http.sendRequest({
				api: this.api.auth.sUpdateAuthApi,
				data: data,
				success: res => {
					console.log(res);
					if (res.success == 'true' && res.data) {
					}
					uni.showToast({
						title: res.message
					});
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},

		addAuthData() {
			var data = {};
			this.$refs.loadingCover.show();
			this.http.sendRequest({
				api: this.api.address.sAuthAddApi,
				data: data,
				success: res => {
					console.log(res);
					if (res.success == 'true' && res.data) {
					}
					uni.showToast({
						title: res.message
					});
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.back {
	background-color: white;
}
.view-back {
	background-color: white;
	.status-back-view {
		width: 100%;
		padding-top: 32rpx;
		padding-bottom: 32rpx;
		background-color: white;
	}
	.type-back-view {
		width: 100%;
		display: flex;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		align-items: center;
		justify-content: center;
		.address-list-top {
			// width: 100%;
			// margin-top: 30px;
			width: 200rpx;
			// padding: 0px 30px;
		}
	}
	.data-back-view {
		width: 100%;
		.data-list-view {
			padding-top: 8rpx;
			padding-bottom: 8rpx;
			.data-list-item-view {
				padding-top: 8rpx;
				padding-bottom: 8rpx;
				margin-left: 32rpx;
				margin-right: 32rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				border: 1rpx solid $uni-border-color;
				.image {
					margin-left: 32rpx;
					width: 40rpx;
					height: 40rpx;
					background-color: white;
				}
				.input {
					// margin-left: 16rpx;
					// margin-right: 16rpx;
					padding: 0;
					width: 100%;
				}
			}
		}
	}
	.image-back-view {
		width: 100%;

		.image-list-view {
			padding-top: 32rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.image-list-view-left {
				width: 100%;
				padding-left: 16rpx;
				padding-top: 16rpx;
				padding-bottom: 16rpx;
				// padding-right: 8rpx;
				margin-right: 8rpx;
				// border: 1px solid $uni-border-color;
				.image {
					width: 100%;
					height: 180rpx;
				}
			}
			.image-list-view-right {
				width: 100%;
				// padding-left: 8rpx;
				margin-left: 8rpx;
				padding-top: 16rpx;
				padding-bottom: 16rpx;
				padding-right: 16rpx;
				// border: 1px solid $uni-border-color;
				.image {
					width: 100%;
					height: 180rpx;
				}
			}
		}
	}
	.btn-back-view {
		width: 100%;
		padding-top: 32rpx;
		padding-bottom: 32rpx;
		.status {
			padding-top: 32rpx;
			padding-bottom: 32rpx;
			text-align: center;
			.text {
				color: $uni-text-color-primary;
				font-size: 30rpx;
			}
		}
		.btn {
			margin-left: 32rpx;
			margin-right: 32rpx;

			.text {
				color: white;
				font-size: 30rpx;
				height: 90rpx;
				background-color: $uni-btn-color-primary;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
			}
		}
	}
}
</style>
